<template>
    <PageWrapper>
        <n-card :bordered="false" class="mb-3 proCard">
        <n-space align="center">
          <n-input-group style="width: 1280px">
            
            <div style="margin-left: 30px !important;display: flex;align-items: center;">
              <n-date-picker v-model:value="range" type="daterange"  @update:value="onChange4" clearable />
            </div>
            <n-button type="primary" style="margin-left: 40px !important;" @click="reloadTable">
              <template #icon>
                <n-icon>
                  <SearchOutlined />
                </n-icon>
              </template>
              查询
            </n-button>
          </n-input-group>
        </n-space>
      </n-card>
      <n-card :bordered="false" class="proCard">
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.id"
          ref="basicTableRef"
          :actionColumn="actionColumn"
          virtual-scroll
        >
        </BasicTable>
      </n-card>
  
    </PageWrapper>
  </template>
  
  <script lang="ts" setup>
    import { h, reactive, ref } from 'vue';
    import { useMessage } from 'naive-ui';
    import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
    import { SearchOutlined } from '@vicons/antd';
    import { columns } from './columns';
    import { logIndex } from '@/api/adminlog/index';
  
    const message = useMessage();
    const basicTableRef = ref();
    const tableData = ref();
    const range = ref<[number, number]>();
  
    const params = reactive({
      sdate: '',
      edate: '',
      page:1,
      pageSize:10,
      totalPage:1,
    });
  
  
    // 操作
    const actionColumn: BasicColumn = reactive({
      width: 150,
      title: '操作',
      key: 'action',
      fixed: 'right',
      align: 'center',
      render(record) {
        return h(TableAction as any, {
          actions: [
            // {
            //   label: '查看详情',
            //   onClick: handleEdit.bind(null, record),
            // }, {
            //   label: '删除',
            //   onPositiveClick: handleDelete.bind(null, record),
            //   isConfirm: true,
            //   confirmContent: '您确定要删除吗？',
            // },
          ],
        });
      },
    });
  
    //列表数据
    const loadDataTable = async (res) => {
      const result = await logIndex({ ...params, ...res });
      tableData.value = result.list;
      return result;
    };
  
    //加载表格
    function reloadTable() {
      basicTableRef.value.reload();
    }
  
    function onChange4(v: number){
      if(v != null){
        params.sdate = v[0];
        params.edate = v[1];
      }else{
        params.sdate = '';
        params.edate = '';
      }
    }
  
  </script>
  
  <style lang="less" scoped>
    .light-green{
      margin-bottom: 30px;
  
      .title{
        margin-bottom: 20px;
        font-size: 18px;
      }
  
      .nr{
  
        span{
          display: block;
          margin-bottom: 6px;
        }
      }
    }
  
  
  </style>
  